<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>这个地球可以点击</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        align-items: center;
        background: #2c3e50;
        display: flex;
        justify-content: center;
        min-height: 100vh;
      }
      :root {
        --b: #22a7f0;
        --c: rgba(255, 255, 255, 0.3);
        --g: #2ecc71;
        --s: 100;
      }
      .earth {
        background: var(--b);
        border-radius: 100%;
        cursor: pointer;
        height: calc(var(--s) * 1px);
        overflow: hidden;
        position: relative;
        width: calc(var(--s) * 1px);
      }
      .earth__face {
        --size: calc((var(--s) * 0.1) * 1px);
        height: 20%;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -75%);
        width: 45%;
      }
      .earth__face--straining:after {
        background: #fff;
        border-radius: 0 100% 100%;
        content: "";
        height: var(--size);
        left: 85%;
        opacity: 0.65;
        position: absolute;
        top: -65%;
        transform: rotate(45deg);
        width: var(--size);
      }
      .earth__eye {
        background: #000;
        border-radius: 100%;
        height: var(--size);
        position: absolute;
        top: 0;
        width: var(--size);
      }
      .earth__eye--blinking {
        -webkit-animation: blink 10s infinite linear;
        animation: blink 10s infinite linear;
      }
      .earth__eye:after,
      .earth__eye:before {
        background: #fff;
        border-radius: 100%;
        content: "";
        position: absolute;
      }
      .earth__eye:after {
        height: 30%;
        left: 20%;
        top: 15%;
        width: 30%;
      }
      .earth__eye:before {
        height: 15%;
        left: 25%;
        top: 55%;
        width: 15%;
      }
      .earth__eye:nth-of-type(1) {
        left: 0;
      }
      .earth__eye:nth-of-type(2) {
        right: 0;
      }
      .earth__eye--straining {
        background: transparent;
      }
      .earth__eye--straining:nth-of-type(2) {
        transform: rotate(180deg);
      }
      .earth__eye--straining:after,
      .earth__eye--straining:before {
        background: #000;
        border-radius: 0;
        height: calc((var(--s) * 0.025) * 1px);
        left: 50%;
        position: absolute;
        top: 50%;
        transform-origin: right;
        width: var(--size);
      }
      .earth__eye--straining:after {
        transform: translate(-50%, -50%) rotate(20deg);
      }
      .earth__eye--straining:before {
        transform: translate(-50%, -50%) rotate(-20deg);
      }
      .earth__eye--spinning {
        background: transparent;
      }
      .earth__eye--spinning:after,
      .earth__eye--spinning:before {
        background: #000;
        border-radius: 0;
        height: calc((var(--s) * 0.025) * 1px);
        left: 50%;
        position: absolute;
        top: 50%;
        transform-origin: center;
        width: var(--size);
      }
      .earth__eye--spinning:after {
        transform: translate(-50%, -50%) rotate(45deg);
      }
      .earth__eye--spinning:before {
        transform: translate(-50%, -50%) rotate(-45deg);
      }
      @-webkit-keyframes blink {
        0%,
        73%,
        75%,
        100% {
          transform: scaleY(1);
        }
        74% {
          transform: scaleY(0.1);
        }
      }
      @keyframes blink {
        0%,
        73%,
        75%,
        100% {
          transform: scaleY(1);
        }
        74% {
          transform: scaleY(0.1);
        }
      }
      .earth__mouth {
        -webkit-clip-path: circle(50% at 50% 0);
        background: #000;
        bottom: 0;
        clip-path: circle(50% at 50% 0);
        height: var(--size);
        left: 40%;
        position: absolute;
        width: var(--size);
      }
      .earth__mouth--extended,
      .earth__mouth--dizzy {
        -webkit-clip-path: circle(50% at 50%);
        clip-path: circle(50% at 50%);
      }
      .earth__mouth--straining {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%);
        border-radius: 0;
        clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%);
      }
      .earth__map {
        --starter: calc(var(--s) * 0.05);
        background: var(--g);
        border-radius: calc(var(--starter) * 1px);
        cursor: pointer;
        height: calc(var(--starter) * 1px);
        left: 50%;
        margin: calc(var(--starter) * -1px) 0 0 calc(var(--starter) * -1px);
        position: absolute;
        top: 30%;
        width: calc(var(--starter) * 1px);
        box-shadow: calc(var(--s) * -1px) 0 0 calc((var(--s) * 0.2) * 1px)
            var(--g),
          calc((var(--s) * 0.825) * -1px) 0 0 calc((var(--s) * 0.175) * 1px)
            var(--g),
          calc((var(--s) * 0.75) * -1px) calc((var(--s) * 0.4) * 1px) 0
            calc((var(--s) * 0.15) * 1px) var(--g),
          calc((var(--s) * 0.15) * 1px) 0 0 calc((var(--s) * 0.075) * 1px)
            var(--g),
          calc((var(--s) * 0.075) * 1px) calc((var(--s) * 0.3) * 1px) 0
            calc((var(--s) * 0.125) * 1px) var(--g),
          calc((var(--s) * 0.6) * 1px) calc((var(--s) * 0.15) * 1px) 0
            calc((var(--s) * 0.25) * 1px) var(--g),
          calc((var(--s) * 1.1) * 1px) calc((var(--s) * 0.4) * 1px) 0
            calc((var(--s) * 0.2) * 1px) var(--g),
          calc((var(--s) * 2) * 1px) 0 0 calc((var(--s) * 0.2) * 1px) var(--g),
          calc((var(--s) * 2.175) * 1px) 0 0 calc((var(--s) * 0.175) * 1px)
            var(--g),
          calc((var(--s) * 2.25) * 1px) calc((var(--s) * 0.4) * 1px) 0
            calc((var(--s) * 0.15) * 1px) var(--g),
          calc((var(--s) * 3) * 1px) 0 0 0 var(--g),
          calc((var(--s) * 3.15) * 1px) 0 0 calc((var(--s) * 0.075) * 1px)
            var(--g),
          calc((var(--s) * 3.075) * 1px) calc((var(--s) * 0.3) * 1px) 0
            calc((var(--s) * 0.125) * 1px) var(--g),
          calc((var(--s) * 3.6) * 1px) calc((var(--s) * 0.15) * 1px) 0
            calc((var(--s) * 0.25) * 1px) var(--g),
          calc((var(--s) * 4.1) * 1px) calc((var(--s) * 0.4) * 1px) 0
            calc((var(--s) * 0.2) * 1px) var(--g);
      }
      .earth__clouds {
        --starter: calc(var(--s) * 0.05);
        -webkit-animation: rotate 60s infinite linear;
        animation: rotate 60s infinite linear;
        background: var(--c);
        border-radius: 100%;
        height: calc(var(--starter) * 2px);
        left: 50%;
        position: absolute;
        top: 60%;
        width: calc(var(--starter) * 4px);
        box-shadow: calc((var(--s) * 1) * -1px) calc((var(--s) * 0.1) * -1px) 0
            calc((var(--s) * 0.05) * 1px) var(--c),
          calc((var(--s) * 0.5) * -1px) calc((var(--s) * 0.05) * 1px) 0
            calc((var(--s) * 0.15) * 1px) var(--c),
          calc((var(--s) * 0.6) * -1px) calc((var(--s) * 0.425) * -1px) 0
            calc((var(--s) * 0.1) * 1px) var(--c),
          calc((var(--s) * 0.05) * 1px) calc((var(--s) * 0.375) * -1px) 0
            calc((var(--s) * 0.2) * 1px) var(--c),
          calc((var(--s) * 0.7) * 1px) calc((var(--s) * 0.15) * -1px) 0
            calc((var(--s) * 0.15) * 1px) var(--c),
          calc((var(--s) * 1.1) * 1px) calc((var(--s) * 0.4) * -1px) 0
            calc((var(--s) * 0.1) * 1px) var(--c),
          calc((var(--s) * 0.3) * 1px) calc((var(--s) * 0.1) * 1px) 0
            calc((var(--s) * 0.05) * 1px) var(--c),
          calc((var(--s) * 1.2) * -1px) calc((var(--s) * 0.4) * -1px) 0
            calc((var(--s) * 0.1) * 1px) var(--c),
          calc((var(--s) * 1.25) * -1px) calc((var(--s) * 0.2) * 1px) 0
            calc((var(--s) * 0.125) * 1px) var(--c),
          calc((var(--s) * 1.1) * 1px) calc((var(--s) * 0.15) * 1px) 0
            calc((var(--s) * 0.15) * 1px) var(--c),
          0 0 0 calc((var(--s) * 0.025) * 1px) var(--c),
          calc((var(--s) * 3) * 1px) 0 0 calc((var(--s) * 0.025) * 1px) var(--c),
          calc((var(--s) * 2) * 1px) calc((var(--s) * 0.1) * -1px) 0
            calc((var(--s) * 0.05) * 1px) var(--c),
          calc((var(--s) * 2.5) * 1px) calc((var(--s) * 0.05) * 1px) 0
            calc((var(--s) * 0.15) * 1px) var(--c),
          calc((var(--s) * 2.4) * 1px) calc((var(--s) * 0.425) * -1px) 0
            calc((var(--s) * 0.1) * 1px) var(--c),
          calc((var(--s) * 3.05) * 1px) calc((var(--s) * 0.375) * -1px) 0
            calc((var(--s) * 0.2) * 1px) var(--c),
          calc((var(--s) * 3.7) * 1px) calc((var(--s) * 0.15) * -1px) 0
            calc((var(--s) * 0.15) * 1px) var(--c),
          calc((var(--s) * 4.1) * 1px) calc((var(--s) * 0.4) * -1px) 0
            calc((var(--s) * 0.1) * 1px) var(--c),
          calc((var(--s) * 3.3) * 1px) calc((var(--s) * 0.1) * 1px) 0
            calc((var(--s) * 0.05) * 1px) var(--c),
          calc((var(--s) * 1.8) * 1px) calc((var(--s) * 0.4) * -1px) 0
            calc((var(--s) * 0.1) * 1px) var(--c),
          calc((var(--s) * 1.75) * 1px) calc((var(--s) * 0.2) * 1px) 0
            calc((var(--s) * 0.125) * 1px) var(--c),
          calc((var(--s) * 4.1) * 1px) calc((var(--s) * 0.15) * 1px) 0
            calc((var(--s) * 0.15) * 1px) var(--c);
      }
      @media (min-width: 768px) {
        .earth {
          --s: 200;
        }
      }
      @-webkit-keyframes rotate {
        to {
          transform: translate(calc(var(--s) * -3px), 0);
        }
      }
      @keyframes rotate {
        to {
          transform: translate(calc(var(--s) * -3px), 0);
        }
      }
    </style>
  </head>
  <body>
    <!-- partial:index.partial.html -->
    <div id="app"></div>
    <!-- partial -->
    <script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
    <script>
      function _defineProperty(obj, key, value) {
        if (key in obj) {
          Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true,
          });
        } else {
          obj[key] = value;
        }
        return obj;
      }
      const { React, ReactDOM, Linear, Elastic, TimelineMax } = window;
      const { Component } = React;
      const { render } = ReactDOM;

      const shake = (el, dur) => {
        const TL = new TimelineMax({ repeat: 1 });
        const shakes = [
          [1, 1, 0],
          [-1, -2, -1],
          [-3, 0, 1],
          [3, 2, 0],
          [1, -1, 1],
          [-1, 2, -1],
          [-3, 1, 0],
          [3, 1, -1],
          [-1, -1, 1],
          [1, 2, 0],
          [1, -2, -1],
          [0, 0, 0],
        ];

        for (const shake of shakes) {
          TL.to(el, dur / 12, {
            x: shake[0],
            y: shake[1],
            rotation: shake[2],
          });
        }
        return TL;
      };

      class Earth extends Component {
        constructor(...args) {
          super(...args);
          _defineProperty(this, "state", {
            spinning: false,
            shrinking: false,
            extended: false,
            extending: false,
          });
          _defineProperty(
            this,
            "toggleT",

            []
          );
          _defineProperty(this, "spin", () => {
            const {
              state: { extending, spinning, extended, width },
            } = this;
            if (spinning || extended || extending) return;
            this.setState(
              {
                spinning: true,
              },

              () => {
                for (let toggle of this.toggleT) clearInterval(toggle);
                const TL = new TimelineMax({
                  onComplete: () => this.setState({ spinning: false }),
                });

                TL.to(this.map, 0.25, {
                  x: -(width * 3),
                  repeat: 4,
                  ease: Linear.easeNone,
                });

                TL.to(this.map, 0, {
                  x: 0,
                });
              }
            );
          });
          _defineProperty(this, "componentDidMount", () => {
            this.reset();
            window.addEventListener("resize", this.reset());
          });
          _defineProperty(this, "reset", () => {
            this.earth.removeAttribute("style");
            const { height, width } = this.earth.getBoundingClientRect();
            this.setState({
              height,
              width,
            });
          });
          _defineProperty(this, "extend", () => {
            const {
              earth,
              state: { height, width, extended },
            } = this;
            const TL = new TimelineMax({
              onStart: () =>
                this.setState({
                  shrinking: extended,
                  extending: !extended,
                }),

              onComplete: () =>
                this.setState({
                  extended: !extended,
                  extending: false,
                  shrinking: false,
                }),
            });

            // If not expanded, do a little shake then a shrink then a blimp
            if (!extended) TL.add(shake(earth, 0.5));
            TL.to(earth, 0.5, {
              ease: Elastic.easeOut.config(1, 0.3),
              width: !extended ? width * 3 : width,
              borderRadius: !extended ? height / 10 : height / 2,
            });
          });
          _defineProperty(this, "toggle", () => {
            const {
              extend,
              state: { extending, spinning },
            } = this;
            if (extending || spinning) return;
            this.toggleT = [...this.toggleT, setTimeout(extend, 200)];
          });
          _defineProperty(this, "render", () => {
            const {
              spin,
              toggle,
              state: { extended, extending, spinning, shrinking },
            } = this;
            return /*#__PURE__*/ React.createElement(
              "div",
              {
                onClick: toggle,
                onDoubleClick: spin,
                ref: (e) => (this.earth = e),
                className: "earth",
              } /*#__PURE__*/,
              React.createElement("div", {
                ref: (m) => (this.map = m),
                className: "earth__map",
              }) /*#__PURE__*/,
              React.createElement("div", {
                className: "earth__clouds",
              }) /*#__PURE__*/,
              React.createElement(
                "div",
                {
                  className: `earth__face ${
                    extending ? "earth__face--straining" : ""
                  }`,
                } /*#__PURE__*/,
                React.createElement("div", {
                  className: `earth__eye ${
                    spinning ? "earth__eye--spinning" : ""
                  } ${extending ? "earth__eye--straining" : ""} ${
                    !spinning && !extending ? "earth__eye--blinking" : ""
                  }`,
                }) /*#__PURE__*/,

                React.createElement("div", {
                  className: `earth__eye ${
                    spinning ? "earth__eye--spinning" : ""
                  } ${extending ? "earth__eye--straining" : ""} ${
                    !spinning && !extending ? "earth__eye--blinking" : ""
                  }`,
                }) /*#__PURE__*/,

                React.createElement("div", {
                  className: `earth__mouth ${
                    (extended && !shrinking) || spinning
                      ? "earth__mouth--extended"
                      : ""
                  } ${extending ? "earth__mouth--straining" : ""}`,
                })
              )
            );
          });
        }
      }

      const rootNode = document.getElementById("app");
      render(/*#__PURE__*/ React.createElement(Earth, null), rootNode);
    </script>
  </body>
</html>
